import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const ButtonTestScreen: React.FC = () => {
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        section: { marginBottom: 16 },
        row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
        card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
        box: { width: 64, height: 64, borderRadius: 12, backgroundColor: colors.surface, alignItems: 'center', justifyContent: 'center' },
    });

    return (
        <Layout.Page headerShown headerProps={{ title: 'Button 测试', backVisible: true }} padding={16} scrollable>
            {/* 基础样式：variant + color + textColor */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础样式</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>variant: primary/secondary/outline/text；color 支持主题预设与自定义；textColor 覆盖文字颜色</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="Primary" variant="primary" color="primary" testID="button-basic-primary" />
                        <UI.Button title="Secondary" variant="secondary" testID="button-basic-secondary" />
                        <UI.Button title="Outline" variant="outline" color="success" testID="button-basic-outline-success" />
                        <UI.Button title="Text" variant="text" testID="button-basic-text" />
                        <UI.Button title="Custom Color" variant="primary" color="#8A2BE2" textColor="#FFF" testID="button-basic-custom-color" />
                    </View>
                </Layout.Card>
            </View>

            {/* 尺寸与形状：small / medium / large + rounded/square/circle */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸与形状</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>size: small/medium/large；shape: rounded/square/circle</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="S-Rounded" size="small" shape="rounded" testID="button-size-small-rounded" />
                        <UI.Button title="M-Square" size="medium" shape="square" testID="button-size-medium-square" />
                        <UI.Button title="L-Circle" size="large" shape="circle" testID="button-size-large-circle" />
                    </View>
                </Layout.Card>
            </View>

            {/* 宽度与布局：fullWidth / flex */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>宽度与布局</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>fullWidth: 占满容器宽度；flex: 在行内自适应伸展</UI.Text>
                    <View style={{ gap: 8 }}>
                        <UI.Button title="Full Width" fullWidth testID="button-fullwidth" />
                        <View style={[styles.row, { width: '100%' }]}>
                            <UI.Button title="Flex 1" flex testID="button-flex-1" />
                            <UI.Button title="Flex 2" flex testID="button-flex-2" />
                        </View>
                    </View>
                </Layout.Card>
            </View>

            {/* 图标与位置：icon + iconPosition（left/right）以及纯图标圆形按钮 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>图标与位置</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>icon 与 iconPosition：左右放置；circle 形状可用于纯图标按钮</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="Like" icon={<UI.Icon name="heart" color="text" />} iconPosition="left" testID="button-icon-left" />
                        <UI.Button title="Next" icon={<UI.Icon name="arrow-forward" color="text" />} iconPosition="right" testID="button-icon-right" />
                        <UI.Button icon={<UI.Icon name="star" color="text" />} shape="circle" size="medium" variant="secondary" testID="button-icon-circle" />
                    </View>
                </Layout.Card>
            </View>

            {/* 加载与禁用：loading/disabled */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>加载与禁用</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>loading 显示指示器并降低文本不透明度；disabled 置灰不可点击</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="Loading" loading testID="button-loading" />
                        <UI.Button title="Disabled" disabled testID="button-disabled" />
                        <UI.Button title="Loading + Icon" loading icon={<UI.Icon name="cloud-download" color="text" />} testID="button-loading-icon" />
                    </View>
                </Layout.Card>
            </View>

            {/* 触摸类型：opacity/highlight/pressable + underlayColor */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>触摸类型</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>touchType: opacity / highlight / pressable；highlight 可自定义 underlayColor</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="Opacity" touchType="opacity" testID="button-touch-opacity" />
                        <UI.Button title="Highlight" touchType="highlight" underlayColor={`${colors.primary}20`} testID="button-touch-highlight" />
                        <UI.Button title="Pressable" touchType="pressable" testID="button-touch-pressable" />
                    </View>
                </Layout.Card>
            </View>

            {/* 渐变：gradientEnabled + variant(linear/radial) + colors/angle/opacity */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>渐变背景</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>启用 gradientEnabled 后，按钮背景透明，由内部绝对层承载渐变；可设置 variant、colors、angle、opacity</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="Linear" gradientEnabled gradientVariant="linear" gradientColors={["#FF7A00", "#FF2D55"]} gradientAngle={45} gradientOpacity={0.9} testID="button-gradient-linear" />
                        <UI.Button title="Radial" gradientEnabled gradientVariant="radial" gradientColors={["#34C759", "#0A84FF"]} gradientOpacity={0.9} testID="button-gradient-radial" />
                        <UI.Button title="Custom Cfg" gradientEnabled gradientColors={[colors.primary, colors.secondary]} gradientStart={{ x: 0, y: 0 }} gradientEnd={{ x: 1, y: 1 }} testID="button-gradient-custom" />
                    </View>
                </Layout.Card>
            </View>

            {/* 阴影：预设与自定义 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>阴影</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>shadowSize 预设：xs/sm/md/lg/xl/glow/top/bottom/left/right/inner；可通过 shadowColor/Offset/Opacity/Radius 覆盖</UI.Text>
                    <View style={{}}>
                        <UI.Button title="XS" shadowSize="xs" testID="button-shadow-xs" mb={15} />
                        <UI.Button title="SM" shadowSize="sm" testID="button-shadow-sm" mb={15} />
                        <UI.Button title="MD" shadowSize="md" testID="button-shadow-md" mb={15} />
                        <UI.Button title="LG" shadowSize="lg" testID="button-shadow-lg" mb={15} />
                        <UI.Button title="XL" shadowSize="xl" testID="button-shadow-xl" mb={15} />
                        <UI.Button title="Glow" shadowSize="glow" testID="button-shadow-glow" mb={15} />
                        <UI.Button title="Top" shadowSize="top" testID="button-shadow-top" mb={15} />
                        <UI.Button
                            title="Custom"
                            // 提升强度：Android 对应更高 elevation（lg=8, xl=16）
                            shadowSize="lg"
                            // 你的自定义覆盖项（iOS 生效；Android 仍以 elevation 为主）
                            shadowColor={'#f00'}
                            shadowOffset={{ width: 0, height: 3 }}
                            shadowOpacity={0.35}
                            shadowRadius={6}
                            testID="button-shadow-custom"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* Spacing 与 Box 属性示例：p/m/mh/mv/ph/pv/background/borderRadius 等 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>Spacing 与 Box 属性</UI.Text>
                    <UI.Text variant="caption" color="subtext" mb={8}>支持 p/m/mh/mv/ph/pv 等间距属性；BoxProps 支持 backgroundColor、border/borderRadius 等</UI.Text>
                    <View style={styles.row}>
                        <UI.Button title="p=8" p={8} testID="button-spacing-p8" />
                        <UI.Button title="mh=12" mh={12} testID="button-spacing-mh12" />
                        <UI.Button title="bg surface" backgroundColor={colors.surface} borderWidth={1} borderColor={colors.border} testID="button-box-bg-border" />
                        <UI.Button title="radius lg" borderRadius={16} testID="button-box-radius-lg" />
                    </View>
                </Layout.Card>
            </View>
        </Layout.Page>
    );
};

export default ButtonTestScreen;